
<template>
    <a-row>
        <a-col :span="7">
            <a-input-search v-model:value="searchKey" placeholder="请输入数据信息" style="width: 200px; margin-bottom: 10px;"
                @search="onSearch()" />
        </a-col>
        <a-col :span="7">
            <a-select v-model:value="form.instrumentType" placeholder="选择仪器系列" style="width: 200px">
                <a-select-option v-for="item of instrumentData" :key="item">{{ item }}</a-select-option>
            </a-select>
        </a-col>
    </a-row>

    <a-table :rowKey="(record) => record.combinationName" :row-selection="rowSelection" :dataSource="dataSource"
        size="small" :columns="columns" bordered :scroll="{ x: 1000 }" :pagination="false">
        <template #bodyCell="{ column, text, record }">
            <template v-if="column.title === '仪器串组合'">
                {{ record.instrumentNameList.toString().replace(/,/g, " + ") }}
            </template>
            <template v-if="column.title === '操作'">
                <a-button type="text" @click="edit(record)">修改 </a-button>
                <a-button type="text" @click="del(record.id)"> 删除</a-button>

            </template>
        </template>

    </a-table>
    <AntdZh>
        <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>
</template>
<script setup>
import { ref } from 'vue';
import { instrumentList } from '../../tool/craft'
import { queryList, deleteOne } from "@/api/tool/combination.js";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const instrumentDatas = ref(instrumentList)
const instrumentData = Object.values(instrumentDatas.value).map(item => item.name)
const emit = defineEmits(["combinationSelection", "edit"]);
const instrumentType = ref('')
const data = reactive({
    form: {}
});
const props = defineProps({
    title: {
        type: String,
        default: '新建仪器串'
    }
})
const { form } = toRefs(data);
const dataSource = ref([]);
const total = ref(1)
// 定义表格列配置
const columns = ref([
    {
        title: '仪器串名称',
        dataIndex: 'combinationName',
        key: 'combinationName',
        width: '15%',
    },
    {
        title: '仪器串系列',
        dataIndex: 'combinationSeries',
        key: 'combinationSeries',
        width: '10%',
    },
    {
        title: '仪器串组合',
        dataIndex: 'nameList',
        key: 'nameList',
        width: '70%',
    }
])
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', order: 'DESC', combinationId: undefined });

const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        emit("combinationSelection", selectedRows[0])
    },
    getCheckboxProps: record => ({
        disabled: record.combinationId === 'Disabled Horsehead',
        // Column configuration not to be checked
        combinationId: record.combinationId,
    }),
};

function edit(e) {
    emit("edit", e)
}
function del(e) {
    deleteOne(e).then(res => {
        getList();
    })
}
/** 查询井列表 */
function getList() {
    if (props.title === '修改仪器串') {
        columns.value = [
            {
                title: '仪器串名称',
                dataIndex: 'combinationName',
                key: 'combinationName',
                width: 150,
            },
            {
                title: '仪器串系列',
                dataIndex: 'combinationSeries',
                key: 'combinationSeries',
                width: 100,
            },
            {
                title: '仪器串组合',
                dataIndex: 'nameList',
                key: 'nameList',
                width: 800,
            }, {
                title: '操作',
                dataIndex: 'edit',
                key: 'edit',
                fixed: 'right',
                width: 150,
            }
        ]
    }
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });

}
getList();

/** 搜索按钮操作 */
function onSearch() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 10, sortBy: 'id',
        searchKey: '',
    }
    getList();
}

/** 提交按钮 */
function submitItem() {

}
</script>
  